<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-MVVM的理解</title>
</head>
<body>
  <h1>对MVVM的定义</h1>
  MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。<br/>
  Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
 <br/>
  模型（Model）： 数据保存—存放着各种数据，有的是固定写死的，大多数是从后端返回的数据<br/>
  视图 （View）：用户界面，也就是DOM<br/>
  视图模型（View-Model）:连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知数据做改动，这就实现了数据的双向绑定。
  <br/>
  MVVM流程图如下：<br/>
 <img src="../img/6492270-33cfb7a84077dc4a.webp">
  <h1> MVVM和 MVC 区别？</h1>
  都是一种设计思想<br/>
  MVC 后台用的多，MVC是Model-View-Controller的简写，即模型-视图-控制器。<br/>
  MVC的目的就是将M和V 的代码分离<br/>
  MVC是单向通信，也就是View和Model，必须通过Controller来承上启下<br/>
  MVVM实现了View和Model的自动同步，当Model的属性改变时，不用再自己手动操作DOM元素，提高了页面渲染性能<br/>\
</body>

</html>